<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<title>异步获取学生信息</title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
    $(function (){
        //2040706301-雷诏华
        $("#querybtn").click(function(){
                //补充ajax请求相关代码
                var stuName=$("#stuName").val();
                $.ajax({
                    url:'queryStudents',
                    type:'post',
                    data:{
                        stuName:stuName,
                    },
                    dataType:'json',
                    success:function (data){
                        var htmlStr="";
                        htmlStr+='<tr>';
                        htmlStr+='    <td>学号</td>';
                        htmlStr+='    <td>姓名</td>';
                        htmlStr+='    <td>性别</td>';
                        htmlStr+='</tr>';
                        $.each(data,function (index,obj){
                            htmlStr+='<tr>';
                            htmlStr+='    <td>'+obj.num+'</td>';
                            htmlStr+='    <td>'+obj.name+'</td>';
                            htmlStr+='    <td>'+obj.gender+'</td>';
                            htmlStr+='</tr>';
                        })
                        $("#studentTable").html(htmlStr);
                    }

                })
        });

    });

</script>
</head>
<body>
<h1>异步查询学生信息</h1>
请输入姓名，模糊查询：
<input name="stuName" id="stuName" type="text" size="32" />
<input id="querybtn" type="button" value="查询"  />
<table border="1" id="studentTable" >
</table>
</body>
</html>
